<!--
 * @Author: swl
 * @Date: 2023-07-03 11:04:56
 * @LastEditors: swl
 * @LastEditTime: 2023-07-08 14:24:28
-->

<!-- *ngf -->

<!-- *ngFor 结构型指令 https://angular.cn/guide/structural-directives -->
<!-- {{xxxx}} 模板 https://angular.cn/guide/template-overview
<div *ngFor="let student of list;let i=index;">
  <div [style.background]="student.age<18?'cyan':''">
    {{i+1}}:{{student.name}}，{{student.mobile}}，{{student.studentId}}，{{student.gitee}}
     *ngIf 结构型指令  https://angular.cn/guide/structural-directives -->
<!-- (xxxx) 事件 绑定用户事件给DOM 参考 https://developer.mozilla.org/zh-CN/docs/Web/API/Element
    <button *ngIf="!student.ischeck" (click)="checkIn(student)">签到</button>
    <span *ngIf="student.ischeck">已签到</span>
  </div>
</div>
-->

<!-- <nova-comp-tag-navbar></nova-comp-tag-navbar> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/malihu-custom-scrollbar-plugin@3.1.5/jquery.mCustomScrollbar.concat.min.js"></script> -->
<script src="../../../js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="../../../js/bar.js"></script>
<div class="box">
  <mat-tab-group animationDuration="0ms">
    <mat-tab label="乐">
      <!-- <img src="http://p1.music.126.net/pbT0ag5PXJwYzFJ7YklMCA==/109951163386629013.jpg" alt=""> -->
      <div class="content_box">
        <!-- 图片的显示 -->
        <div class="img_box">
          <img *ngIf="SongList" [class.animation2]="musicPlay.isRotating" src="{{SongList.music_cover}}" alt="" class="Song_img" id="Song_img">
        </div>
        <!-- 用于歌曲的标题显示 -->
        <div class="song_box">
          <div class="song_left">
            <div class="song_title" *ngIf="SongList">{{SongList.music_songname}}</div>
            <div class="song_author" *ngIf="SongList">{{SongList.music_author}}</div>
          </div>
          <div class="song_logo" (click)="TogglePlay()">
            <ion-icon [name]="isChange?'pause-circle-outline':'play-circle-outline'" class="song_logo_font"></ion-icon>
          </div>
        </div>
        <!-- 进度条的搭建 -->
        <div class="music_progress_bar">
          <div class="music_progress_line" [style.width.%]="progress">

          </div>
        </div>
      </div>
      <audio *ngIf="SongList" src="{{SongList.music_address}}" id="myAudio" controls style="display: none;"></audio>
      <div class="bottom">
        <div class="bottom_left">
          <div class="love">
            <ion-icon [name]="isLoved?'heart':'heart-outline'" style="font-size: 24px;" class="love_logo"
              (click)="ToggleChecked()"></ion-icon>
          </div>
          <div class="love_count">108</div>
        </div>
        <div class="bottom_right">
          <div class="share">
            <ion-icon name="share-outline" style="font-size: 24px;"></ion-icon>
          </div>
          <div class="share_count">5</div>
        </div>
      </div>
    </mat-tab>
    <mat-tab label="句">
      <div class="sentence_box">
        <div class="sentence_text">{{this.Sentence_text}}</div>
      </div>
      <div class="sentence_left">
        <div class="sentence_from">《{{this.Sentence_from}}》</div>
        <div class="sentence_author">——{{this.Sentence_author}}</div>
      </div>
      <!-- <div class="bottom">
        <div class="bottom_left">
          <div class="love">
            <ion-icon [name]="isLoved?'heart':'heart-outline'" style="font-size: 24px;" class="love_logo"
              (click)="ToggleChecked()"></ion-icon>
          </div>
          <div class="love_count">108</div>
        </div>
        <div class="bottom_right">
          <div class="share">
            <ion-icon name="share-outline" style="font-size: 24px;"></ion-icon>
          </div>
          <div class="share_count">5</div>
        </div>
      </div> -->
    </mat-tab>
    <mat-tab label="文">
      <div class="article">
        <!-- <div class="article_title">{{this.Article_title}}</div>
        <div class="article_author">{{this.Article_author}}</div>
        <div [innerHTML]="Article_content" class="article_content"></div> -->
        <div class="article_title">{{this.Article_title}}</div>
        <div class="article_author">{{this.Article_author}}</div>
        <div [innerHTML]="Article_content" class="article_content" >{{this.Article_content.content}}</div>
      </div>
    </mat-tab>
  </mat-tab-group>
</div>
